<template>
    <el-header class="header">
        <div id="header1">
            <el-header class="header-inner">
            <!-- 左侧 Logo 区 -->
            <div class="header-logo">
                <span class="header-title">客服</span>
            </div>
            <!-- 右侧用户信息区 -->
            <div class="user-info">
                <img :src="userAvatar" alt="用户头像" class="user-avatar" />
                <span class="user-phone">{{ userName }}</span>
            </div>
            </el-header>
        </div>
    </el-header>
     <el-main class="main">
      <el-row justify="end">
        <el-button  type="danger" @click="handleAdd"><el-icon><Plus /></el-icon>添加</el-button>
        <el-button type="info" @click="handleRefresh"><el-icon><Refresh /></el-icon>刷新</el-button>
      </el-row>
      <el-table :data="tableData" border width="100%" >
        <el-table-column prop="details" label="详情"  />
        <el-table-column prop="addtime" width="250" label="添加时间" />
        <el-table-column prop="status"  width="140" label="状态">
          <template #default="scope">
            <span class="status-tag"  :style="{color: scope.row.status === 0 ? '#67c23a' : '#f56c6c', }"  
            :class="scope.row.status">{{ scope.row.status==0 ? "启用" : "禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogVisible" :title="isruler==1 ?'编辑' : '添加'" >    
            <el-form :model="formData" ref="formRef" :rules="formRules">
                <el-form-item label="详情" label-position="right" prop="details">
                     <el-input  v-model="formData.details" type="textarea" />
                </el-form-item>
                <el-form-item label="状态" label-position="right">
                    <el-radio-group v-model="formData.status">
                      <el-radio :value=0 >启用</el-radio>
                      <el-radio :value=1 >禁用</el-radio>
                    </el-radio-group>
                    
                </el-form-item>
                <el-button @click="clearFormdata">取消</el-button>
                <el-button type="primary" @click="onSubmit">确定</el-button>
            </el-form>
        </el-dialog>
    </el-main>
    <el-footer>
      <el-pagination background layout="prev, pager, next" 
      :total="total" 
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange" 
      >
      </el-pagination>
       <el-input-number
      v-model="pageSize"
      :min="1"
      :max="10"
      controls-position="right"
      @change="handleChange"
    /> <span style="font-size: 30px;color: #000;">条/页</span>
    </el-footer>
      
</template>

<script setup>
    // 用户信息
    // 导入 dayjs
    import dayjs from 'dayjs';
    import { ElMessageBox,ElMessage} from 'element-plus';
    import { Plus,Refresh } from '@element-plus/icons-vue';
    import { ref,reactive } from 'vue';
    import { getScriptList,getAddScript,geyUpdateScript } from '@/components/api/PermissionMange';
    const userAvatar = ref("");
    const userName = ref("15210418591");
    const dialogVisible = ref(false)
    const total = ref(10);
    const pageSize =ref(2);
    const currentPage =ref(1);
    const formRef = ref(null)
    const isruler = ref(0);
    // 表单效验
    const formRules = reactive({
      details: [
        { 
          required: true,  // 强制必填
          message: "请输入",  // 错误提示
          trigger: "blur"  // 触发时机：失去焦点时验证
        }
      ]
    });
    // 表格数据
    const clearFormdata=()=>{
        ElMessageBox.confirm(
          '是否取消修改？',
          '提示',
          {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
          }
        )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '取消成功',
          })
          formRef.value.resetFields();  // 重置表单（清空内容+清除验证状态）
          dialogVisible.value = false
        })
    }
    const handlePageChange=(a)=>{
      currentPage.value =a
      getlsit()
    }
    const handleChange =()=>{
      getlsit()
    }
    // 确定添加修改
    const onSubmit = async () => {
       
          const aaa = (a)=>{
            if (isruler.value == 0){
                return getAddScript(a)
            }
            else{
                return  geyUpdateScript(a)
            }
       }

      try {
        // 调用表单验证方法
        await formRef.value.validate();
        // 验证通过：执行提交逻辑
        // 直接调用 format() 方法，传入目标格式
        const currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
        console.log(currentTime);
        formData.value.addtime = currentTime
        aaa(formData.value)
        .then(res=>{
             if (res.code === 200) {
                console.log(res);
                ElMessage.success("提交成功");
                dialogVisible.value = false;
                formRef.value.resetFields();  // 重置表单（清空内容+清除验证状态）
                getlsit()
             }
        })
        
      } catch (error) {
        console.log("验证失败：", error);
        return false;
      }
    };
    const tableData = ref([
    {
    }
    ]);
    const formData = ref({
        details: "",
        addtime: "",
        status: null
    })
    const getlsit = ()=>{
          const data = {
              pageIndex:currentPage.value,
              pageSize:pageSize.value
          }
          getScriptList(data)
          .then(res=>{
             if (res.code === 200) {
                total.value = res.dataset.totalSize
                tableData.value = res.dataset.list
                console.log(tableData.value);
                
             }
        })
    }
    getlsit()
    // 操作方法
    const handleAdd = () => {
        isruler.value = 0;
        dialogVisible.value = true;
        console.log("点击了添加按钮");
    };

    const handleRefresh = () => {
    // 刷新逻辑，可重新请求数据
    console.log("点击了刷新按钮");
    };

    const handleEdit = (row) => {
    isruler.value = 1;
    dialogVisible.value = true
    // 编辑逻辑，可弹出编辑表单对话框
    formData.value = row;
    console.log("点击了编辑按钮，当前行数据：", row);
    };
</script>

<style lang="less" scoped>

:deep(.el-input-number.is-controls-right .el-input__wrapper){
  height:40px !important;
  margin-left: 20px;
}
.el-footer{
  display: flex;
  align-items: center;
  justify-content: center;
}
:deep(.el-input-number.is-controls-right .el-input-number__decrease) {
    left: auto;
    right: 1px;
    top: 25px;
}
.header {
  height: 80px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  .header-inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  #header1{
    height:50px;
    border-bottom: 1px solid #ccc ;
  }
  .header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    img {
      width: 24px;
      height: 24px;
    }
    .header-title {
      font-size: 18px;
      font-weight: 700;
      color: #333;
    }
  }
  :deep(.el-input) {
    box-sizing: border-box;
    width: 150px;
  }
  .el-select__wrapper {
    width: 150px;
  }
  .el-form-item__content {
    width: 180px;
  }
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
    .user-phone {
      font-size: 14px;
      color: #666;
    }
  } 
  :deep(#caozu){
    width:500px !important;
  }
}
.el-row{
    margin-bottom:30px;
}

</style>